<template>
  <el-card class="box-card" style="margin-top: 20px;margin-left: 20px;margin-right: 20px">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope" v-if="scope.row.files?.length > 0">
          <el-table :data="scope.row.files" border>
            <el-table-column label="ID" prop="id" v-if="false"/>
            <el-table-column label="文件名称" prop="filename"/>
            <el-table-column label="文件类型" prop="type"/>
            <el-table-column label="操作" min-width="80px">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleDownload(scope.row)">下载</el-button>
                <el-button type="success" size="mini" @click="handlePreview(scope.row)">预览</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template v-else>
          <span>暂无数据</span>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id" v-if="false"/>
      <el-table-column label="学生姓名" prop="username"/>
      <el-table-column label="课题名称" prop="title"/>
      <el-table-column label="邮箱" prop="email"/>
      <el-table-column label="电话" prop="phone"/>
    </el-table>
    <!--分页-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum">
      </el-pagination>
    </div>
    <el-dialog title="收货地址" :visible.sync="isShow">
      <template>
        <VueOfficeDocx
          v-if="fileType === 'word'"
          :src="previewSrc"
          style="height: 100vh;"
          @rendered="rendered"
        />

        <VueOfficePdf
          :src="previewSrc"
          v-if="fileType === 'pdf'"
          style="height: 100vh;"
        />

        <VueOfficeExcel
          :src="previewSrc"
          v-if="fileType === 'excel'"
          style="height: 100vh;"
        />
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import { getGuideInfoListApi } from "@/api/GuideApi";
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import VueOfficePdf from '@vue-office/pdf'

export default {
  name: "Guide",
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf
  },
  data() {
    return {
      tableData: [],
      isShow: false,
      fileType: '',
      totalNum: 0,
      currentPage: 1,
      pageSize: 20,
      previewSrc: 'http://static.shanhuxueyuan.com/test6.docx'
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.initTable()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initTable()
    },
    initTable() {
      let params = {
        current: this.currentPage,
        size: this.pageSize
      }
      getGuideInfoListApi(params).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.records;
          this.totalNum = res.data.total;
        }
      })
    },
    handlePreview(row) {
      const extension = row.filename.split('.').pop().toLowerCase();
      // 判断文件类型是否为Word文档
      if (extension === 'doc' || extension === 'docx') {
        this.previewSrc = "http://" + window.location.hostname + ":8888/images/" + row.path;
        this.fileType = 'word'
        this.isShow = true
      } else if (extension === 'pdf') {
        this.previewSrc = "http://" + window.location.hostname + ":8888/images/" + row.path;
        this.fileType = 'pdf'
        this.isShow = true
      } else if (extension === 'xlsx' || extension === 'xls') {
        this.previewSrc = "http://" + window.location.hostname + ":8888/images/" + row.path;
        this.fileType = 'excel'
        this.isShow = true
      } else {
        this.$notify({
          title: '警告',
          message: '不支持预览的文件类型',
          type: 'warning'
        });
      }

    },
    rendered() {
      console.log('渲染完成')
    },
    async handleDownload(row) {
      let url = "http://" + window.location.hostname + ":8888/images/" + row.path;
      try {
        const response = await fetch(url);
        const blob = await response.blob();
        // 创建一个下载链接
        const downloadLink = document.createElement('a');
        downloadLink.href = window.URL.createObjectURL(blob);
        downloadLink.download = row.filename;
        // 将链接添加到DOM中
        document.body.appendChild(downloadLink);
        // 模拟点击下载链接
        downloadLink.click();
        // 移除下载链接
        document.body.removeChild(downloadLink);
      } catch (error) {
        console.error('下载文件时发生错误:', error);
      }
    }
  },
  created() {
    this.initTable();
  }
}
</script>

<style scoped>
.block {
  margin-top: 10px;
  width: 100%;
  display: inline-block;
  text-align: center;
}
</style>
